webpack慕课

一 简介

二 webpack入门

https://www.webpackjs.com

Webpack 中文官网

1 npm init 初始化 webpack项目 npm init

2 安装webpack

* 方式1 全局安装 webpack(不推荐)

npm install webpack webpack-cli -g

---

* 方式 2 在项目中安装webpack(推荐)

npm install webpack webpack-cli -D

---

@ 方法2 项目中安装 npm install webpack webpack-cli –save-d

cd webpack-demo (在项目内安装)
nvm use 8
npm install webpack webpack-cli --save-d  (npm install webpack webpack-cli -D) 两者等价
npm webpack -v (6.4.1)
npx webpack -v  (4.30.0)

采用淘宝镜像安装   如下

npm install   --registry=https://registry.npm.taobao.org  --disturl=https://npm.taobao.org/mirrors/node

• 查看版本
• 

npx webpack -v 是指在项目中查找webpack的版本

---

三 webpack配置文件

---

@ 打包

npx webpack

---

npm run bundle (打包)

---

四 webpack项目文件结构

webpack.config.js

const path =require('path')

module.exports={
	entry:'./src/index.js'
	output:{
		filename: 'bundle.js'
		path: path.resolve(_dirname,'dist')
	}

}

---

打包项目 npx webpack

---

五 Loader

https://webpack.js.org/plugins/

https://webpack.js.org/loaders/

---

• 打包图片

---

---

---

loader

---

---

---

---

---

---

六 sourseMap

---

---

---

建议

---

---

七 webpackDevServer

---